<template>
	<view class="splash-container">
		<div class="timer center">
			{{ timerNumber }}
		</div>
		<image src="/static/pic/logo.png" mode="widthFix" class="logo"></image>
		<image :src="basicData.index_bg.logo" mode="aspectFill" class="w-full h-full"></image>
		<!-- <image src="/static/pic/splash.png" mode="aspectFill" class="w-full h-full"></image> -->
		<image src="/static/pic/car.png" mode="widthFix"
			style="position: absolute;bottom: 0;left: 0;width: 100%;z-index: 1">
		</image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timer: null,
			timerNumber: 3
		}
	},
	onShow() {
		this.timerNumber = 3
		if (uni.getStorageSync('openid')) {
			setTimeout(function(){
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},500)
			
		} else {
			this.startTimer()
		}
	},
	computed: {
		basicData() {
			return this.$store.state.basicData
		}
	},
	methods: {
		startTimer() {
			const timerFn = () => {
				this.timerNumber--
				if (this.timerNumber == 0) {
					clearInterval(this.timer)
					uni.navigateTo({
						url: "/pages/start/login"
					})
				}
			}
			timerFn()
			this.timer = setInterval(timerFn, 1000)
		}
	}
}
</script>

<style>
.timer {
	position: absolute;
	z-index: 9;
	right: 5%;
	top: 5%;
	font-size: 48rpx;
	color: #9E9E9E;
	width: 80rpx;
	height: 80rpx;
	background-color: #D8D8D8;
	border-radius: 50%;
}

.logo {
	position: absolute;
	z-index: 1;
	width: 278rpx;
	left: 50%;
	transform: translateX(-50%);
	top: 280rpx;
}

.splash-container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
</style>